<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SmartInput</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="popup-container">
    <div class="header">
      <div class="logo">
        <span class="icon" aria-hidden="true">🎤</span>
        <span class="title">SmartInput</span>
      </div>
      <div class="user-info hidden" id="userInfo" aria-live="polite">
        <span class="user-name" id="userName">用户</span>
      </div>
      <div class="status-indicator" id="statusIndicator" aria-live="polite">
        <span class="status-dot" aria-hidden="true"></span>
        <span class="status-text">连接中...</span>
      </div>
    </div>
    
    <div id="loginSection" class="login-section">
      <h3>账户登录</h3>
      <div class="login-form">
        <label for="username" class="sr-only">用户名</label>
        <input type="text" id="username" name="username" placeholder="用户名" class="login-input" aria-required="true">
        <label for="password" class="sr-only">密码</label>
        <input type="password" id="password" name="password" placeholder="密码" class="login-input" aria-required="true">
        <button type="button" id="loginBtn" class="primary-btn" aria-describedby="loginError">登录</button>
        <div class="login-error" id="loginError" role="alert" aria-live="polite"></div>
        <div class="form-footer">
          <span class="switch-text">还没有账户？</span>
          <button type="button" id="showRegisterBtn" class="link-btn">立即注册</button>
        </div>
      </div>
    </div>

    <div id="registerSection" class="login-section hidden">
      <h3>用户注册</h3>
      <div class="login-form">
        <label for="regUsername" class="sr-only">用户名</label>
        <input type="text" id="regUsername" name="regUsername" placeholder="用户名" class="login-input" aria-required="true">
        <label for="regPassword" class="sr-only">密码</label>
        <input type="password" id="regPassword" name="regPassword" placeholder="密码" class="login-input" aria-required="true">
        <label for="regConfirmPassword" class="sr-only">确认密码</label>
        <input type="password" id="regConfirmPassword" name="regConfirmPassword" placeholder="确认密码" class="login-input" aria-required="true">
        <button type="button" id="registerBtn" class="primary-btn" aria-describedby="registerError">注册</button>
        <div class="login-error" id="registerError" role="alert" aria-live="polite"></div>
        <div class="form-footer">
          <span class="switch-text">已有账户？</span>
          <button type="button" id="showLoginBtn" class="link-btn">立即登录</button>
        </div>
      </div>
    </div>

    <div class="main-content hidden">
      <div class="status-section">
        <h3>连接状态</h3>
        <div class="status-info">
          <div class="status-item">
            <span class="status-label">连接状态:</span>
            <span class="status-value" id="connectionStatus">检查中...</span>
          </div>
          <div class="status-item">
            <span class="status-label">用户:</span>
            <span class="status-value" id="userStatus">未登录</span>
          </div>
        </div>
      </div>
      
      <div class="quick-actions">
        <h3>快捷操作</h3>
        <div class="action-buttons">
          <button type="button" class="action-btn" id="settingsBtn">
            <span class="action-icon" aria-hidden="true">⚙️</span>
            <span class="action-text">设置</span>
          </button>
          <button type="button" class="action-btn" id="helpBtn">
            <span class="action-icon" aria-hidden="true">❓</span>
            <span class="action-text">帮助</span>
          </button>
          <button type="button" class="action-btn" id="logoutBtn">
            <span class="action-icon" aria-hidden="true">🚪</span>
            <span class="action-text">登出</span>
          </button>
          <button type="button" class="action-btn" id="testBtn">
            <span class="action-icon" aria-hidden="true">🧪</span>
            <span class="action-text">测试</span>
          </button>
          <button type="button" class="action-btn" id="validateTokenBtn">
            <span class="action-icon" aria-hidden="true">🔐</span>
            <span class="action-text">验证Token</span>
          </button>
          <button type="button" class="action-btn" id="refreshStatusBtn">
            <span class="action-icon" aria-hidden="true">🔄</span>
            <span class="action-text">刷新状态</span>
          </button>
        </div>
      </div>
      
      <div class="recent-activity">
        <h3>最近活动</h3>
        <div class="activity-list" id="activityList" aria-live="polite">
          <div class="activity-item">
            <span class="activity-icon" aria-hidden="true">📝</span>
            <span class="activity-text">暂无活动</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <div class="device-info">
        <span class="device-id" id="deviceId">设备ID: 加载中...</span>
      </div>
      <div class="version-info">
        <span class="version">v3.0.0</span>
      </div>
    </div>
  </div>
  
  <script src="config.js"></script>
  <script src="popup.js"></script>
</body>
</html>